/* Base Application Styles */
/* body {
  color: #fff;
  background: #222;
}

.index img {
  margin: 40px auto;
  border-radius: 4px;
  background: #fff;
  display: block;
}

.index .notice {
  margin: 20px auto;
  padding: 15px 0;
  text-align: center;
  border: 1px solid #000;
  border-width: 1px 0;
  background: #666;
}

$test-scss : 51px;
.test-css {
  margin-left: $test-scss;
} */


@font-face {font-family: 'icons-turn-arrow';
    src: url('../fonts/icons/icons-turn-arrow.eot'); /* IE9*/
    src: url('../fonts/icons/icons-turn-arrow.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/icons/icons-turn-arrow.woff') format('woff'), /* chrome、firefox */
    url('../fonts/icons/icons-turn-arrow.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../fonts/icons/icons-turn-arrow.svg#icons-turn-arrow') format('svg'); /* iOS 4.1- */
}

.turn-arrow{
    font-family:"turn-arrow" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

.icon-xuanzhuanjiantou:before { content: "\e603"; }
.icon-youxuanzhuanjiantou:before { content: "\e605"; }

$img-width: 290px;
$img-height: 163px;
$img-padding: 10px;
$stage-height: 680px;

html, body {
  width: 100%;
  height: 100%;
  background-color: #666;
}

p {
  margin: 0;
  padding: 0;
}

.app {
  width: 100%;
  height: 100%;
}

/* stage -- start */
.stage {
  position: relative;
  width: 100%;
  height: $stage-height;
}
/* stage -- end */

/* img-sec -- start */
/* 设置一下想要图片显示的大小 */

/* 
原始大小
  $img-width: 580px;
  $img-height: 326px;

testSize：
  $img-width: 116px;
  $img-height: 65px;
  $img-padding: 10px;
 */

.img-sec {
  position: relative;
  width: 100%;
  height: 100%;

  overflow: hidden; /* 超出的部分切掉 */
  background-color: #bbb;

  perspective: 1800px;

  @at-root {
    .img-figure {
      position: absolute;

      width: $img-width + $img-padding * 2;
      height: $img-height  + $img-padding * 2 + 40px;

      margin: 0;
      padding: $img-padding;
      background-color: #fff;

      box-sizing: border-box;
      cursor: pointer;  /* 鼠标指针变成手指 */
      transform-origin: 0 50% 0;
      transform-style: preserve-3d;
      transition: transform .6s ease-in-out, left .6s ease-in-out, top .6s ease-in-out; /* 翻转和移动时动画效果 */


      &.isInverse {
        transform: translate($img-width) rotateY(180deg);
      }

      /*border: 1px solid black;*/
      
      img {
        width: $img-width;
        height: $img-height;
      } 

      figcaption {
        text-align: center;
        .img-title {
          margin: 20px 0 0 0;
          color: #a7a0a2;
          font-size: 16px; 
        }
        .img-back {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          padding: 15px;
          overflow: auto;
          box-sizing: border-box;
          text-align: center;
          transform:rotateY(180deg) translateZ(1px);
          background: #fff;
          p {
            padding: 30px 10px;
            /*background: #ddd;*/
            font-size: 15pt;
            color: #999;
            font-weight: bold;
          }
        }
      }
    }
    
  }
}
/* img-sec -- end */

/* controller -- start */
.controller-nav {
  position: relative;
  left: 0;
  bottom: $stage-height/12;
  z-index: 101;
  width: 100%;
  height: 30px;
  text-align: center;

  @at-root {
    .controller-unit {
      /*position: relative;*/
      /*bottom: 30px;*/
      display: inline-block;
      width: 30px;
      height: 30px;
      margin: 0px 5px;
      text-align: center;
      vertical-align: middle;
      cursor: pointer;
      background-color: #888;
      border-radius: 50%;

      transform: scale(.7);
      transition: transform .6s ease-in-out, background-color .3s;

      &.isCenter {
        background: #666;
        transform: scale(1);

        &::after {
          color: #fff;
          font-family: "icons-turn-arrow";
          content: "\e603";
          font-size: 90%;
          line-height: 30px;

          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }

        &.isInverse {
          background-color: #555;
          transform: rotateY(180deg);
        }
      }
    }
  }
}
/* controller -- end */

